/* ====================================================================== BASIS TYPOGRAFIE-STYLES Legt Standard-Farben für verschiedene Text-Elemente fest ====================================================================== */ p, span, small, dd, h1, h2, h3, h4, h5, label, td { color: #000000; } .fixed-md-top { transition: background-color 0.3s ease; } .scrolled-header { /* WEISS */ background-color: #FFFFFF !important; /* TUERKISS */ background-color: #59c9ad !important; } /* ====================================================================== FONT-FACE DEFINITIONEN Bindet die Schriftarten "Info Text Off Regular" und "Info Text Offc" ein ====================================================================== */ @font-face { font-family: "Info Text Off Regular"; src: url("./fonts/Info-Text-Regular.woff2") format("woff2"), url("./fonts/Info-Text-Regular.woff") format("woff"), url("./fonts/Info-Text-Regular.otf") format("opentype"); } @font-face { font-family: "Info Text Offc"; src: url("./fonts/Info-Text-Medium.woff2") format("woff2"), url("./fonts/Info-Text-Medium.woff") format("woff"), url("./fonts/Info-Text-Medium.otf") format("opentype"); } /* ====================================================================== BODY-STYLES Basis-Schrifteinstellungen, Farben und Hintergrundbild für Mobile ====================================================================== */ body { font-family: "Info Text Off Regular", sans-serif; font-size: 18px; font-weight: 500 !important; line-height: 27px; padding-top: 3rem !important; color: #000000 !important; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: left top; /* Positionierung des Hintergrunds */ background-size: cover; /* Skaliert den Hintergrund automatisch, um den Container zu füllen */ } /* ====================================================================== MEDIA QUERIES FÜR DESKTOP Ändert den Hintergrund und fügt zusätzlichen unteren Abstand hinzu ====================================================================== */ @media (min-width: 768px) { body { background-image: url("data:image/svg+xml,%3Csvg width='1920' height='2869' viewBox='0 0 1920 2869' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.4' width='1920' height='2759' fill='url(%23paint0_linear_1_84)'/%3E%3Crect width='1921' height='2053' fill='url(%23paint1_linear_1_84)'/%3E%3Crect y='2053' width='1920' height='816' fill='white'/%3E%3Crect y='1409' width='1920' height='647' fill='url(%23paint2_linear_1_84)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_84' x1='960' y1='2759' x2='2746.17' y2='1621.61' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A9C936'/%3E%3Cstop offset='1' stop-color='%2307A1E2'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1_84' x1='1596.33' y1='2121.43' x2='1922.9' y2='1766.76' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_1_84' x1='960' y1='2056' x2='960' y2='1409' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"); margin-bottom: 35vh !important; background-repeat: no-repeat; background-position: left top; background-size: cover; } } /* ====================================================================== TRANSPARENTE HINTERGRÜNDE Stellt sicher, dass bestimmte Container keinen eigenen Hintergrund haben ====================================================================== */ html, header, html body .container-bg, html body .container-title { background-color: transparent; } /* ====================================================================== CORPORATE IDENTITY Definiert spezifische Schrift- und Layout-Eigenschaften für die Corporate Identity ====================================================================== */ .corporate-identity { font-family: 'Info Text Offc'; font-style: normal; font-weight: 500; font-size: 32px !important; line-height: 40px !important; letter-spacing: 0.025em !important; color: #000000; padding-top: 1.5em; padding-bottom: 0; } /* ====================================================================== BREADCRUMB STYLES Positioniert die Breadcrumbs am unteren Rand des Containers ====================================================================== */ /* .breadcrumb-item.float-none { */ /* bottom: 0; */ /* } */ html body .container-title nav.breadcrumb a, .breadcrumb-item.active { color: black; } /* ====================================================================== FOOTER-STYLES Hintergrund, Text und Link-Styling für den Footer ====================================================================== */ footer { background-color: white; } /* Fettgedruckter Footer-Text */ footer strong, footer b { font-size: 18px; line-height: 34px; font-weight: 500; letter-spacing: 0.01em; } .footer-links { background-color: #FAFAFA; color: black !important; font-family: "Info Text Offc"; font-weight: 400; font-size: 18px !important; line-height: 28px; padding: 1em; } .footer-links > * a { color: black !important; font-family: "Info Text Offc"; font-weight: 400; font-size: 18px !important; line-height: 28px; padding: 1em; } /* ====================================================================== HEADINGS-STYLES Überschriften in verschiedenen Größen und Abständen ====================================================================== */ h2, .h2 { font-size: 22px; line-height: 34px; letter-spacing: 0.01em; font-weight: 500; } h3, .h3 { font-size: 22px; line-height: 34px; letter-spacing: 0.01em; font-weight: 500; } h4, .h4 { font-size: 22px; line-height: 34px; letter-spacing: 0.01em; font-weight: 500; } h5, .h5 { font-size: 22px; line-height: 34px; letter-spacing: 0.01em; font-weight: 500; } /* ====================================================================== TEXT-STYLES Standard-Text, fette und kleine Texte ====================================================================== */ p { font-size: 18px; line-height: 27px; } strong, b { font-weight: 500; /* Medium */ } small, .small { font-size: 16px; line-height: 26px; } /* ====================================================================== BUTTON-STYLES Allgemeine Button-Einstellungen sowie Hover-Effekte ====================================================================== */ .btn { font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: 0.025em; font-family: "Info Text Offc", sans-serif; } .btn-link:hover { color: #07A1E2 !important; text-decoration: none !important; } a:hover { color: #07A1E2 !important; text-decoration: none !important; } /* Bootstrap .lead für größere Texte */ .lead { font-size: 26px; line-height: 38px; } /* ====================================================================== BLOCKQUOTATION-STYLES Stile für Zitate in verschiedenen Größen ====================================================================== */ blockquote, .blockquote { font-size: 32px; line-height: 40px; font-style: italic; } blockquote.small, .blockquote-small { font-size: 24px; line-height: 36px; } /* ====================================================================== NAVIGATION-STYLES Einstelllungen für Navigations-Header und Links ====================================================================== */ .navbar-brand, .nav-link { font-size: 22px; line-height: 34px; letter-spacing: 0.025em; } .progress-label { line-height: normal; } .navbar-nav, .nav-link { font-size: 20px; line-height: 30px; letter-spacing: 0.025em; font-family: "Info Text Offc", sans-serif; } header .navbar-nav .nav-item.active { background-color: white; } /* ====================================================================== SEARCH ICON ANPASSUNG Blendet das originale Bild aus und fügt ein neues Pseudoelement mit einem Icon ein ====================================================================== */ #search > img { display: none !important; } #search::before { content: ""; display: block; width: 24px; /* Icon-Größe anpassen */ height: 24px; background-image: url('/Images/Edubook/MagnifyingGlass.svg'); background-size: cover; background-position: center; } /* ====================================================================== SPEZIELLE BUTTON-STYLES Einstellungen für primäre und sekundäre Buttons inkl. Hover-Effekte ====================================================================== */ .btn-primary, .btn-secondary { min-width: 250px; top: 20px; left: 20px; border-radius: 16px; border-width: 1.5px; padding: 8px 32px; gap: 4px; border: 1.5px solid #07A1E2; } .bg-primary, .btn-primary { background-color: #07A1E2 !important; } .btn-secondary { background-color: white !important; color: #07A1E2 !important; font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: 0.0025em; text-align: center; } .btn-primary:hover, .btn-secondary:hover { transition: transform 0.3s ease-in-out; /* Sanfter Übergang beim Skalieren */ transform: scale(1.05); /* Skaliert den Button beim Hover */ } .btn-primary:hover { color: white; } /* ========================================================= Buttons IN Bootstrap-Gruppen: Offset + feste Breite löschen ========================================================= */ .input-group .btn, .input-group-append .btn, .btn-group .btn, td.text-right > .btn /* Tabelle aus deinem Snippet */ { position: static !important; /* top/left wirken jetzt gar nicht */ top: 0 !important; left: 0 !important; min-width: auto !important; /* passt sich dem Inhalt an */ margin: 0 !important; /* Sicherheitsnetz gegen externe Margins */ } /* Höhe + zentrierter Inhalt */ .input-group-append .btn { height: calc(1.5em + 0.75rem) !important; /* exakt 38 px */ padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; /* Inhalt vertikal mittig */ align-items: center !important; } /* ====================================================================== CARD-STYLES Einstellungen für Karten, Footer und Bilder in Karten ====================================================================== */ .card-footer { padding: 0.75rem 1.25rem; border-top: 0; padding-bottom: 1.25em !important; } .card-footer > .btn-link { font-family: "Info Text Offc"; font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: 0.025em; color: #000000; } .card, .card-footer { border-radius: 16px !important; border-width: 1px; } .add-border-top { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; border-width: 1px; } .card-img-top { width: 100%; aspect-ratio: 1 / 1; /* Sorgt dafür, dass das Bild quadratisch bleibt */ object-fit: cover; object-position: left center; } /* Zusätzliche Einstellungen für quadratische Kartenbilder, wenn aspect-ratio unterstützt wird */ @supports (aspect-ratio: 1 / 1) { .card-img-top.square { aspect-ratio: 1 / 1; padding: 24px; box-sizing: border-box; /* Verhindert, dass Padding das Bild vergrößert */ } } /* ====================================================================== ÜBERSCHRIFT ODER OVERLAY AUSBLENDEN Blendet ein spezifisches Overlay-Element aus ====================================================================== */ div.card-img-overlay.card-img-overlay-top-white.px-1.py-1 { display: none; }